<template>
  <div class="app-container">
    
    <el-card class="box-card">
      <el-form ref="form" :model="integralconfigForm" label-width="380px" :rules="rules">
        <el-form-item label="积分抵用比例（1积分抵多少金额）" prop="integral_ratio">
          <el-input-number size="large" v-model="integralconfigForm.integral_ratio" :min="0.0" :max="99"></el-input-number>
        </el-form-item>
        <el-form-item label="下单赠送积分比例（实际支付1元赠送多少积分）" prop="order_give_integral">
          <el-input-number size="large" v-model="integralconfigForm.order_give_integral" :min="0.0"></el-input-number>
        </el-form-item>
        <el-form-item label="积分冻结时间（天）" prop="freeze_integral_day">
          <el-input-number size="large" v-model="integralconfigForm.freeze_integral_day" :min="0.0" :max="10"></el-input-number>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="submitForm">提交</el-button>
        </el-form-item>
      </el-form>
    </el-card>
  </div>
</template>

<script>
import * as IntegralconfigApi from '@/api/marketing/integralconfig';

export default {
  name: "Integralconfig",
  data() {
    return {
      // 表单参数 - 初始化为对象而不是数组
      integralconfigForm: {
        integral_ratio: null,
        order_give_integral: null,
        freeze_integral_day: null
      },
      // 表单校验规则
      rules: {
        integral_ratio: [
          { required: true, message: '请输入积分抵用比例', trigger: 'blur' }
        ],
        order_give_integral: [
          { required: true, message: '请输入下单赠送积分比例', trigger: 'blur' }
        ],
        freeze_integral_day: [
          { required: true, message: '请输入积分冻结时间', trigger: 'blur' }
        ]
      }
    };
  },
  created() {
    this.getList();
  },
  methods: {
    getList() {
      IntegralconfigApi.getIntegralConfig().then(res => {
        // 确保 res.data 是数组
        if (Array.isArray(res.data)) {
          res.data.forEach(item => {
            // 确保 integralconfigForm 中有对应的属性
            if (this.integralconfigForm.hasOwnProperty(item.name)) {
              this.integralconfigForm[item.name] = item.value;
            }
          });
        }
      }).catch(error => {
        console.error('获取积分配置失败:', error);
        this.$message.error('获取积分配置失败');
      });
    },
    submitForm() {
      // 校验表单
      this.$refs.form.validate(valid => {
        if (valid) {
          // 构建提交数据
          const submitData = [
            { name: "integral_ratio", value: this.integralconfigForm.integral_ratio },
            { name: "order_give_integral", value: this.integralconfigForm.order_give_integral },
            { name: "freeze_integral_day", value: this.integralconfigForm.freeze_integral_day }
          ];
          
          // 调用API并处理结果
          IntegralconfigApi.updateIntegralConfig(submitData).then(res => {
            this.$message.success("修改成功");
            this.getList();
          }).catch(error => {
            console.error('修改积分配置失败:', error);
            this.$message.error('修改积分配置失败');
          });
        } else {
          console.log('表单验证失败');
          return false;
        }
      });
    }
  }
};
</script>

<style>
  .divRow {
    height: 70px;
  }
</style>